.code-block {
  border-radius: 8px;
  overflow: hidden;
  background: #1e1e1e;
  border: 1px solid rgba(255, 255, 255, 0.1);

  .code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #2d2d2d;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    span {
      color: #ffffff;
      font-size: 14px;
    }

    .copy-button {
      color: #ffffff;
      opacity: 0.8;

      &:hover {
        opacity: 1;
        background: rgba(255, 255, 255, 0.1);
      }

      &.copied {
        color: #52c41a;
      }
    }
  }

  .code-container {
    max-height: 500px;
    overflow: auto;

    &::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 3px;

      &:hover {
        background: rgba(255, 255, 255, 0.3);
      }
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    .code-content {
      margin: 0;
      font-family: 'Fira Code', Consolas, Monaco, 'Andale Mono', monospace;

      pre {
        margin: 0;
        background: transparent !important;
        padding: 0;

        code {
          font-family: inherit;
          font-size: 14px;
          line-height: 1.5;
        }
      }
    }
  }
}
